<template>
  <div class="content-box" style="padding-bottom: 100px">
    <!--<div class="address">
      <div>
        <p>您当前所在位置</p>
        <router-link to="/" class="link">售后状态记录-面料</router-link>
      </div>
    </div>-->
    <div class="roder-details">
      <div class="info">
        <h3 class="title">售后记录跟踪</h3>
        <h4 class="title10">{{ detail.createTime }}</h4>
        <div class="text11">
          <!--<p>申请售后：</p>-->
          <div>
            <p>售后类型：{{ detail.afterSalesString }}</p>
            <p>售后原因：{{ detail.reason }}</p>
            <p v-if="detail.afterSalesString=='退货'">
              <span>售后金额：</span>
              <a-input-number :disabled="flag" @blur="updateprice(detail.id,detail.afterPrice)" :min="0"
                              v-model="detail.afterPrice"></a-input-number>
            </p>
            <img v-show="detail.img != null && detail.img != ''" :src="detail.img" style="width: 100px;height: 100px"/>
          </div>
        </div>

        <a-row :gutter="24" v-show="!refuseList.length>0 && !agreeList.length>0">
          <a-col :md="6" :sm="12">
            <a-form-item label="备注">
              <a-textarea
                v-model="remark"
                placeholder="请输入备注"
                :auto-size="{ minRows: 3, maxRows: 10 }"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24" v-show="!refuseList.length>0 && !agreeList.length>0">
          <a-col :md="6" :sm="12">
            <a-form-item>
              <a-button @click="fabricOrderAfterIsAagreeFunc(2)" type="primary">通过审核</a-button>
              <a-button @click="fabricOrderAfterIsAagreeFunc(1)" type="primary" style="margin-left: 10px">驳回售后
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>

        <!--被拒绝的列表-->
        <h3 class="title">已拒绝</h3>
        <div v-for="(item,key) in refuseList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <!--<p>售后状态：{{item.type == '1'?'同意':'拒绝'}}</p>-->
              <p>备注信息：{{ item.reason }}</p>
            </div>
          </div>
        </div>

        <!--已接受-->
        <h3 class="title">已接受</h3>
        <div v-for="(item,key) in agreeList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：待收货</p>
              <p>备注信息：{{ item.reason }}</p>
              <!--<p>运单号：{{item.thirdSn}}</p>-->
            </div>
          </div>
        </div>

        <!--平台收货-->
        <h3 class="title">平台收货</h3>
        <div v-for="(item,key) in ReceivingList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：准备发货</p>
              <p>备注信息：{{ item.reason }}</p>
              <p>运单号：{{ item.thirdSn }}</p>
            </div>
          </div>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="备注">
                <a-textarea
                  v-model="remark2"
                  placeholder="请输入备注"
                  :auto-size="{ minRows: 3, maxRows: 10 }"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item>
                <a-button @click="receiptsOrSubmitFunc(item.id,0,remark2)" type="primary">提交</a-button>
                <a-button @click="receiptsOrSubmitFunc(item.id,1,remark2)" type="primary"
                          style="margin-left: 10px">确认收货
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!--平台已收-->
        <h3 class="title">平台已收</h3>
        <div v-for="(item,key) in shouhuoList" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：平台已收</p>
              <p>备注信息：{{ item.remark }}</p>
              <p v-if="detail.afterSalesString=='退货'">应退金额：{{ detail.afterPrice }}元</p>
              <!--<p>运单号：{{item.thirdSn}}</p>-->
              <a-button @click="openFahuo(item.id)" type="primary"
                        v-if="detail.afterSalesString=='换货' && item.isFahuo!='1'">发货
              </a-button>

              <!--发货的弹框-->
              <!--              <a-modal
                              title="填写物流信息"
                              v-model:visible="visible2"
                              @ok="closeModel"
                            >
                              <p>运单号：
                                <a-input v-model="ProThreadSn"></a-input>
                              </p>
                            </a-modal>-->

              <!--立即发货-->
              <a-modal
                title="订单发货"
                v-model:visible="visible2"
                :confirm-loading="confirmLoading"
                @ok="closeModel"
              >
                <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-form-item label="发货方式">
                    <a-select
                      v-model:value="courierid"
                      placeholder=""
                    >
                      <a-select-option :label="item.courierName" :value="item.id" v-for="(item,key) in getKuaidiList"
                                       :key="item.id">
                        {{ item.courierName }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>

                  <a-form-item label="物流信息">
                    <a-input v-model="yunNumber"/>
                  </a-form-item>

                  <a-form-item label="备注信息">
                    <a-input v-model="fahuoRemark"/>
                  </a-form-item>
                </a-form>
              </a-modal>
            </div>
          </div>
        </div>

        <!--退款-->
        <h3 class="title">退款信息</h3>
        <div v-for="(item,key) in tuikuanlist" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：平台已收</p>
              <p>备注信息：{{ item.remark }}</p>
              <!--<p>运单号：{{item.thirdSn}}</p>-->
              <a-button @click="openFahuo(item.id)" type="primary"
                        v-if="detail.afterSalesString=='换货' && item.isFahuo!='1'">发货
              </a-button>

              <!--发货的弹框-->
              <!--              <a-modal
                              title="填写物流信息"
                              v-model:visible="visible2"
                              @ok="closeModel"
                            >
                              <p>运单号：
                                <a-input v-model="ProThreadSn"></a-input>
                              </p>
                            </a-modal>-->
            </div>
          </div>
        </div>

        <!--平台发货-->
        <h3 class="title">平台发货</h3>
        <div v-for="(item,key) in adminfahuolist" :key="item.id">
          <h4 class="title10">{{ item.createTime }}</h4>
          <div class="text11">
            <!--<p>售后状态：</p>-->
            <div>
              <p>售后状态：平台发货</p>
              <p>备注信息：{{ item.reason }}</p>
              <p>运单号：{{ item.thirdSn }}</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src
// import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getAction} from "../../api/manage";

export default {
  name: 'MyAfterSales',
  // mixins: [JeecgListMixin],
  components: {
    JInput,
  },
  data() {
    return {
      remark2:'', // 收货备注
      yunNumber: '', // 立即发货的运单编号
      fahuoRemark: '', // 发货的备注
      courierid: '', // 发货选中的快递id
      getKuaidiList: [], // 快递列表
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      flag: false, //
      visible2: false,
      ProThreadSn: '',// 物流单号
      remark: '', //备注
      refuseList: [], // 拒绝的列表
      agreeList: [],// 同意的列表
      tankuangvisible: false,
      ReceivingList: [], // 平台收货数据集合
      productGetList: {}, // 产品已收人员列表
      shouhuoList: [], // 已收货的列表
      adminfahuolist: [], // 后台已发货的列表
      tuikuanlist: [], // 退款列表
      fahuotrackid: '', // 要发货的售后跟踪id
      locale,
      datalist: [],
      detail: {
        id: '',
        afterSalesString: "",
        reason: "",
        createTime: "",
        img: '',
        afterPrice: ''
      },
      url: {
        getKuaidi: '/orderCenter/getKuaidi', // 快递列表
        /*receiptsOrSubmit: "/orderCenter/receiptsOrSubmit", // 发货的确认收货与提交*/
        receiving: "/orderCenter/receiving", // 前端发货
        orderAfterdetail: "/orderAfter/getorderatferdetail",
        Aftertracklist: "/orderAfter/getAftertrack",
        fabricOrderAfterIsAagree: "/orderCenter/fabricOrderAfterIsAagree", // 同意或拒绝
        fabricAfterOrderRefuse: "/orderCenter/fabricAfterOrderRefuse", // 拒绝的售后订单跟踪表数据
        fabricAfterOrderAgree: "/orderCenter/fabricAfterOrderAgree", // 同意的售后订单跟踪表数据
        fabricAafterupdate: "/orderCenter/fabricAafterupdate", // 面料售后的确认收货 与 提交
        fabricAafteryishou: "/orderCenter/fabricAafteryishou", // 面料售后产品已收
        fabricAfterFahuo: "/orderCenter/fabricAfterFahuo", // 换货的产品再发货
        fabricAdminFahuo: "/orderCenter/fabricAdminFahuo", // 后台发货
        fabrictuikuan: "/orderCenter/fabrictuikuan", // 退款数据
        updateFabricAfterPrice: "/orderCenter/updateFabricAfterPrice", // 更新退款金额
      },
      ipagination1: {
        current: '',
        pageSize: '',
        total: ''
      },
    }
  },
  created() {
    this.getAftertrack();
    this.getKuaidiFunc();
    this.getorderatferdetail();
    this.getReceivingListFunc();
    this.fabricAfterOrderRefuseFunc();
    this.fabricAfterOrderAgreeFunc();
    this.fabricAafteryishouFunc();
    this.fabricAdminFahuoFunc();
    this.fabrictuikuanFunc();
  },
  methods: {

    /**
     * 获取快递信息
     */
    getKuaidiFunc() {
      getAction(this.url.getKuaidi).then(res => {
        if (res.code == '0') {
          this.getKuaidiList = res.data
        }
      })
    },

    /**
     * 更新售后金额
     */
    updateprice(id, price) {
      getAction(this.url.updateFabricAfterPrice, {
        'afterid': id,
        'price': price
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("操作成功")
        }
      })
    },

    /**
     * 退款信息
     */
    fabrictuikuanFunc() {
      getAction(this.url.fabrictuikuan, {
        'id': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.tuikuanlist = res.data
        }
      })
    },

    /**
     * 后台发货已发货列表
     */
    fabricAdminFahuoFunc() {
      getAction(this.url.fabricAdminFahuo, {
        'id': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.adminfahuolist = res.data
        }
      })
    },

    /**
     * 打开发货弹框
     */
    openFahuo(trackid) {
      this.fahuotrackid = trackid
      this.visible2 = true
    },

    /**
     * 已收货
     */
    fabricAafteryishouFunc() {
      getAction(this.url.fabricAafteryishou, {
        'afterOrderID': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.shouhuoList = res.data
        } else {
          this.$message.error("操作失败")
        }
      })
    },


    /**
     * 平台收货的确认收货 或 提交
     * @param trackAfterID 选中的售后订单跟踪表ID
     * @param type 0 提交，1 确认收货
     * @param remark2 备注
     */
    receiptsOrSubmitFunc(trackAfterID, type, remark2) {
      if (remark2 == '') {
        this.$success.warning("请输入备注信息")
        return
      } else {
        getAction(this.url.fabricAafterupdate, {
          'afterCode': this.$route.query.afterCode,
          'afterOrderID': this.$route.query.id,
          'trackAfterID': trackAfterID,
          'type': type,
          'remarks': remark2
        }).then(res => {
          if (res.code == '0') {
            this.$message.success('操作成功')
            this.getReceivingListFunc()
            this.fabricAafteryishouFunc()
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },


    /**
     * 前端发货
     */
    getReceivingListFunc() {
      getAction(this.url.receiving, {
        'afterOrderID': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.ReceivingList = res.data
        }
      })
    },

    /**
     *面料订单售后已同意
     */
    fabricAfterOrderAgreeFunc() {
      getAction(this.url.fabricAfterOrderAgree, {
        'afterID': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.agreeList = res.data
          if (this.agreeList != null && this.agreeList.length > 0) {
            this.flag = true
          }
        }
      })
    },

    /**
     *面料订单售后已拒绝
     */
    fabricAfterOrderRefuseFunc() {
      getAction(this.url.fabricAfterOrderRefuse, {
        'afterID': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.refuseList = res.data
          if (this.refuseList != null && this.refuseList.length > 0) {
            this.flag = true
          }
        }
      })
    },


    /**
     * 同意或拒绝
     * @param isAgree 1拒绝，2通过审核
     */
    fabricOrderAfterIsAagreeFunc(isAgree) {
      getAction(this.url.fabricOrderAfterIsAagree, {
        'afterID': this.$route.query.id,
        'remark': this.remark,
        'isAgree': isAgree
      }).then(res => {
        if (res.code == '0') {
          this.$message.success("操作成功")
          this.fabricAfterOrderAgreeFunc()
          this.fabricAfterOrderRefuseFunc()
        }
      })
    },

    // 换货的发货，顺便关闭弹窗
    closeModel() {
      getAction(this.url.fabricAfterFahuo, {
        'afterOrderID': this.$route.query.id,
        'number': this.yunNumber,
        'trackid': this.fahuotrackid,
        'kdid': this.courierid,
        'remake': this.fahuoRemark
      }).then(res => {
        if (res.code == '0') {
          this.fabricAafteryishouFunc()
          this.$message.success("发货成功")
          this.visible2 = false
        } else {
          this.$message.warning("发货失败")
        }
      })
    },

    handleOk(e) {
      console.log(e);
      this.tankuangvisible = false;
    },

    selectTab: function (dataStr, i) {
      this[dataStr] = i
    },

    // 分页器方法
    /*handleTableChange2(page, pageSize) {
      getAction(this.url.getteamafterpeople, {
        'pageNo': page.current,
        'pageSize': page.current.pageSize,
        'orderafterId': this.$route.query.id
      }).then(res => {
        if (res.code == '0') {
          this.data1 = res.result.records
          this.ipagination1.current = res.result.current
          this.ipagination1.pageSize = res.result.size
          this.ipagination1.total = res.result.total
        }
      })
    },*/

    //查询该条售后的详情
    getorderatferdetail() {
      getAction(this.url.orderAfterdetail, {
        'id': this.$route.query.id
      }).then(res => {
        this.detail.afterSalesString = res.data.afterSalesString;
        this.detail.createTime = res.data.createTime;
        this.detail.reason = res.data.reason;
        this.detail.img = res.data.img;
        this.detail.afterPrice = res.data.afterPrice;
        this.detail.id = res.data.id;
      })
    },
    //查询该条售后订单的跟踪记录
    getAftertrack() {
      getAction(this.url.Aftertracklist, {
        'id': this.$route.query.id
      }).then(res => {
        this.datalist = res.data;
      })
    },
  }
}
</script>

<style scoped lang="less">
.content-box {
  background-color: #fff;
}

.roder-details {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  padding: 0px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 800px;

    .inputes {
      margin-bottom: 20px;
      display: flex;

      & > input {
        margin-right: 10px;
        width: 173px;
        height: 34px;
        padding: 3px 2px 3px 2px;
        font-family: 'ArialMT', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-decoration: none;
        letter-spacing: normal;
        color: #000000;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: transparent;
        border: 1px solid rgba(220, 223, 230, 1);
        padding-left: 4px;
      }
    }

    .fh {
      width: 82px;
      height: 36px;
      background-color: rgba(81, 81, 81, 1);
      border-radius: 3px;
      display: block;
      line-height: 36px;
      text-align: center;
      color: rgb(236, 227, 0);
    }

    .imgs {
      display: flex;
      margin-bottom: 20px;

      img {
        width: 88px;
        height: 88px;
        margin-right: 10px;
      }
    }


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      & > div {
        & > h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        & > p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
